import styles from './index.module.scss'
import checkEmojiSupport from '@/utils/brower/checkEmoji'
import { useNavigate } from 'react-router-dom'

interface MenuItem {
  emoji: string
  text: string
  path: string
  children?: {
    key: string
    label: string
    path: string
  }[]
}

const Header = () => {
  const isEmojiSupported = checkEmojiSupport('📝')
  const navigate = useNavigate()

  const menuItems: MenuItem[] = [
    {
      emoji: '🏠',
      text: '首页',
      path: '/'
    },
    {
      emoji: '☕',
      text: '杂谈',
      path: '/talk'
    },
    {
      emoji: '📔',
      text: '日记',
      path: '/diary'
    },
    {
      emoji: '✍️',
      text: '文章',
      path: '/article'
    },
    {
      emoji: '🎞️',
      text: '相册',
      path: '/photo'
    },
    {
      emoji: '💭',
      text: '留言',
      path: '/message'
    },
    {
      emoji: '💭',
      text: 'AI',
      path: '/Ai'
    },
  ]

  const renderMenuItem = (item: MenuItem) => {
    const content = (
      <div className={styles.myMenu} onClick={() => navigate(item.path)}>
        <span>
          {isEmojiSupported && item.emoji} {item.text}
        </span>
      </div>
    )

    // 后续返回带有下拉框的结构
    if (item.children) {
      return content
    }

    // 否则返回普通菜单项
    return content
  }

  return (
    <header className={styles.header}>
      <div className={styles.logo}>
        <img src='/logo.png' alt='logo' width={40} height={40} />
      </div>
      <ul className={styles.navMenu}>
        {menuItems.map((item) => (
          <li key={item.path}>{renderMenuItem(item)}</li>
        ))}
        {/* <li>
          <div className={styles.avatarWrap}>
            <div className={styles.login} onClick={() => navigate('/login')}>
              登录
            </div>
          </div>
        </li> */}
      </ul>
    </header>
  )
}

export default Header
